<template>
  <div>
    <van-nav-bar
      title="医院详情"
      style="background-color: #36c14c"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    >
    </van-nav-bar>
    <h1 class="findtitle">找医院</h1>
    <div class="imgbox">
      <img src="../../public/img/hospital_banner.jpg" alt="" />
    </div>
    <ul v-if="addrlistData" class="addrlistbox">
      <li v-for="item in addrlistData" :key="item.id">
        <h3>{{ item.name }}</h3>
        <p>
          <span>医院地址：</span
          ><span class="addrtext" @click="goMap(item.id)">{{ item.addr }}</span>
        </p>
        <p>
          <span>诊疗项目：</span><span>{{ item.projects }}</span>
        </p>
        <p>
          <span>门诊时间：</span><span>{{ item.office_hours }}</span>
        </p>
        <p>
          <span>咨询电话：</span><span>{{ item.tel }}</span>
        </p>
        <p>
          <span>官网网站：</span><span>{{ item.website }}</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addrlistData: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取医院地址列表
    getData() {
      let routeParmas = this.$route.params;
      let args = `provinceId=${routeParmas.provinceId}&cityId=${routeParmas.cityId}`;
      this.axios.post("map/addrlist", args).then(res => {
        this.addrlistData = res.data.data;
      });
    },
    goMap(id) {
      this.$router.push({
        name: "map_container",
        params: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.findtitle {
  padding: 0 16px;
  color: #36c14c;
}
.imgbox {
  width: 100vw;
  position: relative;
  display: inline-block;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.addrlistbox {
  > li {
    margin: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0);
  }

  p {
    margin: 8px 0;
    > span:nth-child(1) {
      width: 200px;
    }
  }
  .addrtext {
    color: #36c14c;
  }
}
::v-deep .van-nav-bar__title {
  color: #fff;
}
::v-deep .van-nav-bar__text {
  color: #fff;
}
::v-deep .van-icon {
  color: #fff;
}
</style>
